<template>
  <view class="container">
    <!-- <view  >
      <text class="underline-text"  @click="openProjectName">{{projectName}}</text>
    </view> -->
	<uni-row class="demo-uni-row" style="margin-bottom: 15px" :gutter="26" >
		<uni-col :span="8" v-for="(val, i) in options" :key="i">
			<button style="font-size: 10px;margin-top: 15px;"  @click="selectProjectName(val.projectName,val.typeId)" >
				<text class="buttontext">{{ val.projectName }}</text>
			</button>
		</uni-col>
	</uni-row>
    <view class="tables" v-show="tableOne">
      <view class="table" >
        <view class="header">
          <text class="header-item">序号</text>
          <text class="header-item">{{firstNum}}</text>
          <text class="header-item">出现次数</text>
        </view>
        <view v-for="(item, itemIndex) in tablesDataOne" :key="itemIndex" class="row">
          <text class="cell">{{ itemIndex  }}</text>
          <view   class="hundred-cell"  >
			  <view  style="hundred-view" >
				<view   class="lableNumClass" 
					:class="item.selected?'selected':'noselected' "   @click="toggleSelectionOne(item)" > 
					<text >{{ item.number }}</text>
				</view>
			</view>
          </view>
          <text class="cell">{{ item.count }}</text>
        </view>
		 <view >
			  <button  @click="submitOne()">提交</button>
		</view>
      </view>
    </view>
     <view class="tables"  v-show="tableTwo">
       <view class="table">
         <view class="header">
           <text class="header-item">序号</text>
           <text class="header-item">{{secondNum}}</text>
           <text class="header-item">次数</text>
         </view>
         <view v-for="(item, itemIndex) in tablesDataTwo" :key="itemIndex" class="row">
           <text class="cell">{{ itemIndex  }}</text>
           <view   class="hundred-cell"  >
				  <view  style="hundred-view" >
					<view   class="lableNumClass" 
						:class="item.selected?'selected':'noselected' "   @click="toggleSelectionTwo(item)" > 
						<text >{{ item.number }}</text>
					</view>
				</view>
           </view>
           <text class="cell">{{ item.count }}</text>
         </view>
         <view >
         	  <button  @click="submitTwo()">提交</button>
         </view>
       </view>
     </view>
	 <view class="tables"  v-show="tableThree">
	   <view class="table" >
	     <view class="header">
	       <text class="header-item">序号</text>
	       <text class="header-item">{{thirdNum}}</text>
	       <text class="header-item">次数</text>
	     </view>
	     <view v-for="(item, itemIndex) in tablesDataThree" :key="itemIndex" class="row">
	       <text class="cell">{{ itemIndex  }}</text>
	       <view   class="hundred-cell"  >
	       			  <view  style="hundred-view" >
	       				<view   class="lableNumClass" 
	       					:class="item.selected?'selected':'noselected' "   @click="toggleSelectionThree(item)" > 
	       					<text >{{ item.number }}</text>
	       				</view>
	       			</view>
	       </view>
	       <text class="cell">{{ item.count }}</text>
	     </view>
	     <view >
	     	  <button  @click="submitThree()">提交</button>
	     </view>
	   </view>
	 </view>
	 <view>
	 	 <uni-popup ref="alertDialog" background-color="#fff" type="center">
	 			<uni-row class="demo-uni-row" style="margin-bottom: 15px" :gutter="26" >
	 				<uni-col :span="8" v-for="(val, i) in options" :key="i">
	 					<button style="font-size: 10px;margin-top: 15px;"  @click="selectProjectName(val.projectName,val.typeId)" >
	 						<text class="buttontext">{{ val.projectName }}</text>
	 					</button>
	 				</uni-col>
	 			</uni-row>
	 	 </uni-popup>
	 </view>
  </view>
</template>

<script>
export default {
  name: 'ThreeVerticalTables',
  data() {
    return {
		tableOne:true,
		tableTwo:true,
		tableThree:true,
		projectName:"百十个位",
		projectNameIndex:0,
		selectedValue: '百十个位',
		options:[{typeId:0,projectName:"百十个位"},
				{typeId:7,projectName:"百十个位差"},
				{typeId:11,projectName:"百十个和"},
				{typeId:15,projectName:"小中大"},
				{typeId:19,projectName:"小中大差"},
				{typeId:23,projectName:"小中大和"},
				{typeId:43,projectName:"和尾"},
				{typeId:100,projectName:"计算结果"}
				
		],
		firstNum:"百位",
		secondNum:"十位",
		thirdNum:"个位",
		optionTypeOne: 4,
		optionTypeTwo: 5,
		optionTypeThree: 6,
		selectedOne:[],
		selectedTwo:[],
		selectedThree:[],
		tablesDataOne: [],
		tablesDataTwo: [],
		tablesDataThree: [],
		selectedHundreds: [],
		type:"plw",
		title:"排三排序",
		arr:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
		args:{
			optionName:"",
			type:"plw",
			recordId:-1
		}
    };
  },
	onLoad(query) {
		this.type = query.type
		if(this.type=='plw'){
			this.title = "排三排序"
		}
		if(this.type=='fcsd'){
			this.title = "3D排序"  
		}
		uni.setNavigationBarTitle({
			title: this.title
		});
		this.getData()
  },
  onShow() {
	  if(this.optionTypeOne == 43){
		  this.tableTwo = false
		  this.tableThree = false
	  }
  },
  computed: {
      dynamicClass() {
        return this.isActive ? 'active-class' : 'inactive-class'; // 根据状态返回不同的类
      }
    },
  methods: {
	  getData(){
		  this.$myRequest({
		  	method: 'get',
		  	url: '/getRecordBySort',
		  	data: {"optionType":this.projectNameIndex,"type":this.type}
		  }).then((res) => {
		  	if (res.flag) {
				this.tablesDataOne=res.data.tablesDataOne
				this.tablesDataTwo=res.data.tablesDataTwo
				this.tablesDataThree=res.data.tablesDataThree
		  	} 
		  });
	  },
	  submitOne(){
			const intersection = this.arr.filter(item => !this.selectedOne.includes(item));
			let result = []
			switch(this.optionTypeOne){
				case 4: //百位
					result =  this.generateCombinationsForOneArray(intersection, this.arr, this.arr);
				break
				case 12: //百十差
					result =  this.getDifferenceStringArray(intersection,0);
				break
				case 20: // 百十和
					result =  this.getSumStringArray(intersection, 0);
				break
				case 24: // 小号
				let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
				let a = intersection;
				intersection.forEach(minValue=> {
					// 计算最小值
					//let minValue = Math.min(...a);
					// 过滤出大于或等于最小值的元素
					let newArrayOne = arr.filter(num => num >= minValue);
					let newArray = arr.filter(num => num > minValue);
					let a = [minValue]
					let a1  = this.generateCombinationsForOneArray(a, newArrayOne, newArrayOne);
					let a2 = this.generateCombinationsForOneArray(newArray, a, newArrayOne);  
					let a3 = this.generateCombinationsForOneArray(newArray, newArray, a);  
					let   results = [...a1,...a2,...a3]
					 result = [...result,...results]
				})
				// 排序数组
				result.sort((a, b) => a - b);
				// 去重
				result = [...new Set(result)];
				//result =this.generateZUArray(intersection,intersection,intersection)
				break
				case 36: // 小中差
					result =  this.getDifferenceSmallMiddleBig(intersection, 0);
				break
				case 40: // 小中和
					result =  this.getSumSmallMiddleBig(intersection, 0);
				break
				case 43: // 和尾
					result =  this.getLotteryHTPAndTails(intersection);
				break
			}
		  this.saveRecord(this.selectedOne,this.optionTypeOne,this.firstNum,result)
	  },
	  submitTwo(){
	  	const intersection = this.arr.filter(item => !this.selectedTwo.includes(item));
	  	let result = []
			switch(this.optionTypeTwo){
				case 5: //十位
					result =  this.generateCombinationsForOneArray(this.arr, intersection,  this.arr);
				break
				case 13: //十个差
					result =  this.getDifferenceStringArray(intersection,1);
				break
				case 21: // 十个和
					result =  this.getSumStringArray(intersection, 1);
				break
				case 25: // 中号
				let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
				let a = intersection;
				intersection.forEach(minValue=> {
					// 计算最小值
					//let minValue = Math.min(...a);
					if(minValue == 0){
						// 过滤出大于或等于最小值的元素
						let newArrayOne = arr.filter(num => num >= minValue);
						let newArray = arr.filter(num => num > minValue);
						let a = [minValue]
						let a1  = this.generateCombinationsForOneArray(a, a, newArrayOne);
						let a2 = this.generateCombinationsForOneArray(a, newArray, a);  
						let a3 = this.generateCombinationsForOneArray(newArray,a, a);  
						let   results = [...a1,...a2,...a3]
						result = [...result,...results]
					}else{
						let minArray = arr.filter(num => num < minValue);
						let minArrayEq = arr.filter(num => num <= minValue);
						let newArrayOne1 = arr.filter(num => num >= minValue);
						let newArray1 = arr.filter(num => num > minValue);
						let aa = [minValue]
						let a11  = this.generateCombinationsForOneArray(minArray, aa, newArrayOne1);
						let a22 = this.generateCombinationsForOneArray(aa, minArray, newArrayOne1);  
						let a33 = this.generateCombinationsForOneArray(aa,newArray1,minArrayEq);  
						let a44 = this.generateCombinationsForOneArray(newArray1,minArray,aa); 
						let a55 = this.generateCombinationsForOneArray(newArray1,aa,minArrayEq); 
						let a66 = this.generateCombinationsForOneArray(minArray,newArray1,aa); 
						let a77 = this.generateCombinationsForOneArray(aa,aa,arr); 
						let   resultss = [...a11,...a22,...a33,...a44,...a55,...a66,...a77]
						result = [...result,...resultss]
					}
					
				})
				// 排序数组
				result.sort((a, b) => a - b);
				// 去重
				result = [...new Set(result)];
				break
				case 37: // 中大差
					result =  this.getDifferenceSmallMiddleBig(intersection, 1);
				break
				case 41: // 中大和
					result =  this.getSumSmallMiddleBig(intersection, 1);
				break
			}
	  	this.saveRecord(this.selectedTwo,this.optionTypeTwo,this.secondNum,result)
	  },
	  submitThree(){
		  const intersection = this.arr.filter(item => !this.selectedThree.includes(item));
		  let result = []
		  	switch(this.optionTypeThree){
		  		case 6: //十位
		  			result =  this.generateCombinationsForOneArray(this.arr,this.arr,intersection);  
		  		break
		  		case 14: // 百个差
		  			result =  this.getDifferenceStringArray(intersection,2);
		  		break
		  		case 22: // 百个和
		  			result =  this.getSumStringArray(intersection, 2);
		  		break
		  		case 26: // 大号
				let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
				let a = intersection;
				intersection.forEach(minValue=> {
					// 计算最小值
					//let minValue = Math.min(...a);
					// 过滤出大于或等于最小值的元素
					let newArrayOne = arr.filter(num => num <= minValue);
					let newArray = arr.filter(num => num <= minValue);
					let a = [minValue]
					let a1  = this.generateCombinationsForOneArray(a, newArrayOne, newArrayOne);
					let a2 = this.generateCombinationsForOneArray(newArray, a, newArrayOne);  
					let a3 = this.generateCombinationsForOneArray(newArray, newArray, a);  
					let   results = [...a1,...a2,...a3]
					 result = [...result,...results]
				})
				// 排序数组
				result.sort((a, b) => a - b);
				// 去重
				result = [...new Set(result)];
				break
		  		case 38: // 小大差
		  			result =  this.getDifferenceSmallMiddleBig(intersection, 2);
		  		break
		  		case 42: // 小大和
		  			result =  this.getSumSmallMiddleBig(intersection, 2);
		  		break
		  	}
		  this.saveRecord(this.selectedThree,this.optionTypeThree,this.thirdNum,result)
	  },
	  saveRecord(selected,optionType,optionName,result){
		let data = {};
		const str = JSON.stringify(selected)
		const deviceId = uni.getStorageSync("phone");
		data.type = this.type; // 彩票类型
		data.optionType = optionType //按钮的类型编号 比如 组排 的 0 百位 1
		data.optionName = optionName //按钮的类型名称  比如 组排 百位
		data.deviceId = deviceId; // 设备唯一编号 可以是手机号
		data.delNum = str;
		data.projectName = this.title
		data.result = JSON.stringify(result)
		// 0 代表从走势图查看的 并且需要在个人记录中查看
		data.flag=1
		this.$myRequest({
			method: 'post',
			url: '/saveRecord',
			data: data
		}).then((res) => {
			if (res.flag) {
				uni.showToast({
					title: '提交记录成功！'
				});
				this.getData()
				this.selectedOne =[]
				this.selectedTwo =[]
				this.selectedThree =[]
			} else {
				uni.showToast({
					title: '提交记录失败请重新提交！'
				});
			}
		});
	  },
	  getLotteryHTPAndTails(numAarr){ // 和尾
	    let arr =this.generateCombinationsForOneArray(this.arr,this.arr,this.arr)
		  return arr.filter(item =>{
				let spnum = item.split("")
				let h = Math.abs(parseInt(spnum[0]) + parseInt(spnum[1]) + parseInt(spnum[2]))%10
				 return numAarr.includes(h)
		  })
	  },
	  generateCombinationsForOneArray(arr1, arr2, arr3) {
	    return arr1.flatMap(i =>  
	      arr2.flatMap(j =>  
	        arr3.map(k => `${i}${j}${k}`)  
	      )  
	    );  
	  },
	  generateZUArray(arr1, arr2, arr3) {
		  let result = []
			arr1.forEach(i =>  
	      arr2.forEach(j =>  
	        arr3.forEach(k =>  result.push(`${i}${j}${k}`))  
	      )  
	    )
		return result;  
	  },
	  getDifferenceSmallMiddleBig(numAarr,index){ // 小中大差
	  		  let arr  = this.generateCombinationsForOneArray(this.arr,this.arr, this.arr);
	  		  arr = arr.filter(item =>{
					let spnum = item.split("").sort((a, b) => a - b);
	  				let b = Math.abs(parseInt(spnum[0]) -parseInt(spnum[1]))
	  				let s = Math.abs(parseInt(spnum[1]) -parseInt(spnum[2]))
	  				let g = Math.abs(parseInt(spnum[0]) -parseInt(spnum[2]))
	  				let arr = [b,s,g]
	  				return numAarr.includes(arr[index])
	  		  })
	  		  return arr
	  },
	  getSumSmallMiddleBig(numAarr,index){ // 小中大和
		  let arr  = this.generateCombinationsForOneArray(this.arr,this.arr, this.arr);
		  arr = arr.filter(item =>{
			let spnum = item.split("").sort((a, b) => a - b);
			let b = Math.abs(parseInt(spnum[0]) + parseInt(spnum[1]))%10
			let s = Math.abs(parseInt(spnum[1]) + parseInt(spnum[2]))%10
			let g = Math.abs(parseInt(spnum[0]) + parseInt(spnum[2]))%10
			let arr = [b,s,g]
			return numAarr.includes(arr[index])
		  })
		  return arr
	  },
	  getDifferenceStringArray(numAarr,index){ // 百十个差
			let arr =this.generateCombinationsForOneArray(this.arr,this.arr,this.arr)
			arr = arr.filter(num =>{
				let spnum = num.split("")
				let b = Math.abs(parseInt(spnum[0]) -parseInt(spnum[1]))
				let s = Math.abs(parseInt(spnum[1]) -parseInt(spnum[2]))
				let g = Math.abs(parseInt(spnum[0]) -parseInt(spnum[2]))
				let arr = [b,s,g]
				return numAarr.includes(arr[index])
		  })
		  return arr
	  },
	  getSumStringArray(numAarr,index){ // 百十个和
			let arr =this.generateCombinationsForOneArray(this.arr,this.arr,this.arr)
				arr = arr.filter(num =>{
				let spnum = num.split("")
				let b = Math.abs(parseInt(spnum[0]) + parseInt(spnum[1]))%10
				let s = Math.abs(parseInt(spnum[1]) + parseInt(spnum[2]))%10
				let g = Math.abs(parseInt(spnum[0]) + parseInt(spnum[2]))%10
				let arr = [b,s,g]
				return numAarr.includes(arr[index])
			})
		  return arr
	  },
	  getClass(row){
	  			return [
	  			 "cell",
	  			   row.flag==0 ? 'left' : 'right',
	  			];
	  },
	  selectProjectName(projectName,index){
		  this.projectName=projectName
		  this.projectNameIndex=index
		  this.$refs.alertDialog.close()
		  this.tableOne = true
		  this.tableTwo = true
		  this.tableThree = true
		  this.selectedOne =[]
		  this.selectedTwo =[]
		  this.selectedThree =[]
		  switch(index){
			  case 0:
			  	this.firstNum = "百位"
			  	this.secondNum = "十位"
			  	this.thirdNum = "个位"
				
				this.optionTypeOne = 4
				this.optionTypeTwo = 5
				this.optionTypeThree = 6
			  break
			  case 7:
			  	this.firstNum = "百十差"
			  	this.secondNum = "十个差"
			  	this.thirdNum = "百个差"
				
				this.optionTypeOne = 12
				this.optionTypeTwo = 13
				this.optionTypeThree = 14
			  	
			  break
			  case 11:
			  	this.firstNum = "百十和"
			  	this.secondNum = "十个和"
			  	this.thirdNum = "百个和"
				
				this.optionTypeOne = 20
				this.optionTypeTwo = 21
				this.optionTypeThree = 22
			  break
			  case 15:
			  	this.firstNum = "小号"
			  	this.secondNum = "中号"
			  	this.thirdNum = "大号"
				
				this.optionTypeOne = 24
				this.optionTypeTwo = 25
				this.optionTypeThree = 26
			  break
			  case 19:
			  	this.firstNum = "小中差"
			  	this.secondNum = "中大差"
			  	this.thirdNum = "小大差"
				
				this.optionTypeOne = 36
				this.optionTypeTwo = 37
				this.optionTypeThree = 38
			 
			  break
			  case 23:
			  	this.firstNum = "小中和"
			  	this.secondNum = "中大和"
			  	this.thirdNum = "小大和"
				
				this.optionTypeOne = 40
				this.optionTypeTwo = 41
				this.optionTypeThree = 42
			  break
			  case 43:
			   this.firstNum = "和尾"
			   this.optionTypeOne = 43
			   this.tableTwo = false
			   this.tableThree = false
			  break
			  case 100:
			  this.args.projectName = this.title
			  this.args.type = this.type
			  this.args.delFlag = 1
			  uni.navigateTo({
			  	url: `/pages/lottery/software/selectionDetails?args=${JSON.stringify(this.args)}`
			  });
			  break
		  }
		  this.getData();
	  },
	openProjectName(){
		  this.$refs.alertDialog.open()
	},
    onPickerChange(e) {
      this.selectedValue = this.options[e.detail.value];
      console.log('选择的位数:', this.selectedValue);
    },
    toggleSelectionOne(item) {
		item.selected = !item.selected
		const index = this.selectedOne.indexOf(item.number);
		if (index > -1) {
			// 如果已选中，取消选择
			this.selectedOne.splice(index, 1);
		} else {
			// 如果未选中，添加到选中列表
			this.selectedOne.push(item.number);
			}
		},
	toggleSelectionTwo(item) {
		item.selected = !item.selected
		const index = this.selectedTwo.indexOf(item.number);
		if (index > -1) {
			// 如果已选中，取消选择
			this.selectedTwo.splice(index, 1);
		} else {
			// 如果未选中，添加到选中列表
			this.selectedTwo.push(item.number);
			}
	},
	toggleSelectionThree(item) {
		item.selected = !item.selected
		const index = this.selectedThree.indexOf(item.number);
		if (index > -1) {
			// 如果已选中，取消选择
			this.selectedThree.splice(index, 1);
		} else {
			// 如果未选中，添加到选中列表
			this.selectedThree.push(item.number);
			}
		},
    getSelectedValues(tableIndex) {

    }
  }
}
</script>

<style>
.underline-text {
  text-decoration: underline;
  color: #742305;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200vh;
}

.dropdown {
  margin-bottom: 10px;
  width: 80%;
}

.picker {
  border: 1px solid #ccc; 
  padding: 10px; 
  text-align: center; 
  background-color: #f2f2f2;
}

.tables {
  display: flex;
  flex-direction: column; /* 改为列方向 */
  align-items: center; /* 使表格居中 */
  width: 100%;           
}

.table {
  margin: 10px 0; /* 上下间距 */
  width: 80%; /* 调整表格宽度 */
}

.table-title {
  font-weight: bold;      
  text-align: center;     
  margin-bottom: 10px;    
}

.header, .row {
  display: flex;
  justify-content: space-between; 
}

.header {
  background-color: #f2f2f2; 
}

.header-item, .cell, .hundred-cell {
  flex: 1;                
  text-align: center;     
  border: 1px solid #ccc; /* 单元格之间的边框 */
  padding: 5px; /* 内边距 */
  line-height: 23px !important;
}
 
.selected {
  background-color:#DD3252; /* 选中时的背景色 */
   
}
 .noselected{
	color:black!important; /* 选中时的背景色 */
 }
.lableNumClass {
	margin-left: 33%;
	/* background-color:gray; */
	font-size: 17px !important;
	border-radius: 50%;
	color: #fff ;
	border: 1px solid #ccc;
	width: 23px !important;
	height: 23px !important;
	line-height: 23px !important;
}
</style>
